<!DOCTYPE html>
<html>
<head>
    <style>
        /* 块元素独自占一行，行内元素全部占一行 */
        /* 元素类型 */
        p
        {
            background-color: aqua;
        }
        span
        {
            background-color: aquamarine;
        }
        i
        {
            background-color: bisque;
        }
        div
        {
            background-color: blanchedalmond;
        }
    </style>
    <meta charset="UTF-8" />
    <title>元素类型与转换</title>
</head>
<body>
    <!-- 元素类型 -->
    <p>p-标记---块元素</p>
    <span>span标记---行内元素</span>
    <i>i标记---行内元素</i>
    <div>div标记---块元素</div>
    <!-- 块元素和行内元素的转换 -->
    <!-- 元素类型转换属性为display，属性值有inline(将元素转化为行内元素)
                                        block(将元素转化为块元素)
                inline-block显示为行内块元素，可以设置高度.宽度。对齐等属性.该元素不会独占一行 -->
</body>
</html>